<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mutation</title>
</head>

<body>
  <div>
    <p>第一个参数是事件名称,第二个参数是参数</p>
    <button @click="$store.commit('increate',1)"></button>
    <p>使用mapMutations方法映射后</p>
    <button @click="increate(1)"></button>
  </div>
  <script>
    import {
      mapMutations
    } from 'vuex'
    export default {
      computed: {

      },
      methods: {
        //使用mapMutationsy映射简化
        ...mapMutations(['increate'])
      }
    }
  </script>
  <script>
    //假设这是store.js文件
    export default new Vuex.Store({
      state: {
        count: 0,
        msg: 'Hello Vuex'
      },
      mutations: {
        //state是状态,payload是调用mutations时传入的额外参数
        increate(state, payload) {
          state.count += payload
        }
      },
      actions: {},
      modules: {}
    })
  </script>
</body>

</html>